<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #000;
            margin: 0 auto;
        }
        .box2 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #c02e14;
            margin: 50px auto;
        }
        
        /*1.淡入淡出动画*/
        @keyframes fade-in-out{
            0% {opacity : 0;}
            50% {opacity : 0.5;}
            100% {opacity : 1;}
        }

        .fade-in-out {
            -webkit-animation: fade-in-out 3s infinite;
            -o-animation: fade-in-out 3s infinite;
            animation: fade-in-out 3s infinite;
        }

        /*2.旋转动画*/
        @keyframes spin {
            0% {transform: rotate(0deg)}
            100% {transform: rotate(360deg)}
        }
        .spin-animation  {
            -webkit-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }

        /*3.弹跳动画*/
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }
        .bounce-animation {
            animation: bounce 2s ease-in-out infinite;
        }

        /*4.平移动画*/
        @keyframes slide {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(0); }
        }

        .slide-animation {
            animation: slide 2s ease-in-out infinite;
        }

        /*5.缩放动画*/
        @keyframes scale {
            0% { transform: scale(1); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }

        .scale-animation {
            animation: scale 2s infinite;
        }

        /*平滑菜单栏制作*/
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        nav li {
            display: inline-block;
        }

        nav a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #000;
        }

        nav a:hover {
            background-color: #333;
            color: #fff;
            transition: background-color 0.4s ease-in-out, color 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </nav>

    <hr>

    <h2 class="fade-in-out">淡入淡出动画</h2>

    <div class="box spin-animation"></div>

    <div class="box2 bounce-animation"></div>

    <div class="box2 slide-animation"></div>

    <div class="box2 scale-animation"></div>
</body>
</html>